<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VVxB3u2hT9wlF2QfiHqu7zNx"></script>
	<title>企业下单</title>
	<style type="text/css"> 
		#container{height:100%}

  		td {   font-size: 9pt;color=#3333FF;height:23pt;nowrap}

	</style> 
	<script type="text/javascript" src="/js/wdatePicker/WdatePicker.js"></script>
	<script src="/js/jquery.js"></script>
    <script src="/js/jquery/jQuery.validity.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/checkArea.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="/css/bootstrap2.css" rel="stylesheet">
    <link href="/css/jquery.validity.css" rel="stylesheet">
    
    <link rel="stylesheet" href="/css/scojs.css">
    <link rel="stylesheet" href="/css/sco.message.css">
</head>
<body>
<table style="width: 100%">
<tr>

<td width="60%" valign="top">
  <div class="well" style="height:800px">
  		<!--百度地图容器-->
  	<div id="container"></div>
  	<div id="results"></div>

  </div>
</td>

<td width="1%" valign="top">
</td>
<td width="39%" valign="top">
 <table width="100%" border="1" cellpadding="1" cellspacing="0"   style="border: 1px solid blue; ">
  <tr height="40">
    <td colspan="6" align="center" bgcolor="#e6e6e6">添加新订单
    		<input type="hidden" id="startpoint_longitude" name="order.startpoint_longitude" value="">
    		<input type="hidden" id="startpoint_latitude" name="order.startpoint_latitude" value="">
    		<input type="hidden" id="endpoint_longitude" name="order.endpoint_longitude" value="">
    		<input type="hidden" id="endpoint_latitude" name="order.endpoint_latitude" value="">
    </td>
  </tr>
  <tr height="40">
    <td width="17%" align="left"  valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>客户手机</td>
    <td colspan="5">
        &nbsp;<input id="clientMobile" name="clientMobile" type="text" value="" style="height:32px; line-height:32px">
    </td>

  </tr>
  <tr height="40">
    <td  align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>客户姓名</td>
    <td colspan="5" >
    	&nbsp;<input id="clientName" name="clientName" type="text" value="" style="height:32px; line-height:32px">
    </td>

  </tr>
   <tr height="20" bgcolor="#a6E3E6">
   <td colspan="6"></td>
   </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>出发地</td>
    <td colspan="3">
	    <em>&nbsp;</em>
	    <input placeholder="附近的小区/街道/建筑物/商圈"  id="startpoint" name="order.startpoint" type="text" value="" required="" 
	    	   style="height:32px; line-height:32px" onpropertychange="search()" oninput="search()" >
	    <div style="display:none" id="bmapcontainer"></div>
	</td>
	<td colspan="2">
        <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btn-position" onclick="search()">定位</button>
        </span>
        <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="btn-position" onclick="markBegin()">地图上选择定位点</button>
        </span>
    </td>
  </tr>
  <tr height="40">
    <td align="left" valign="middle" bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>目的地</td>
    <td colspan="3">
    	<em>&nbsp;</em>
    	<input placeholder="附近的小区/街道/建筑物/商圈"  id="endpoint" name="endpoint" type="text" value="" 
    		   style="height:32px; line-height:32px" onpropertychange="searchEnd()" oninput="searchEnd()">
	</td>
	<td colspan="2">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn-position" onclick="searchEnd()">定位</button>
        </span>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="btn-position" onclick="markEnd()">地图上选择定位点</button>
        </span>
    </td>
  </tr>
  <tr height="40" >
	  <td bgcolor="#E6E6E6"><em>&nbsp;&nbsp;</em>希望出发时间</td>
	  <td colspan="2" align="left" valign="middle" >
		<em>&nbsp;</em><input  id="pointTime" name="pointTime" type="text" value="" required="" size="20" style="width:160px;height:32px;line-height:32px" 
	    						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd mm:ss',readOnly:true})">
	  </td>
	 <td bgcolor="#E6E6E6"><em>&nbsp;</em><font color="red" size="5">人数</font></td>
	 <td colspan="4" align="left" valign="middle" >
		<div>
		    <input class="spinner" id="driverNum" name="driverNum" type="number" value="1" style="width:32px;height:32px;line-height:32px"/>
		</div>	
	 </td>
  </tr>
  <tr height="20" bgcolor="#a6E3E6">
   <td colspan="6"></td>
  </tr>
  <tr height="40" >
    <td colspan="6" bgcolor="#E6E6E6" align="center" valign="middle"><br>
         <button type="button" id="submitBnt" name="submitBnt" class="btn btn-primary" onclick="">确认下单</button><br><br>
    </td>
  </tr>
</table>
</td>

</tr>
</table>
</body>
<script type="text/javascript" src="/js/MarkerTool.js"></script>
<script type="text/javascript">
	var map ;
	function createMap(){
		// 百度地图API功能
		map = new BMap.Map("container");    // 创建Map实例
		map.centerAndZoom(new BMap.Point(121.488186,31.225696), 11);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	}
	
	
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
	
	//地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
	
	function markBegin(){
	    var mkrTool = new BMapLib.MarkerTool(map,{followText: "点击地图添加标注"});
	    mkrTool.addEventListener("markend", function(evt){ 
		    beginPoint = evt.marker;
		    beginPoint.enableDragging(true); // 设置标注可拖拽
		    $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
			 
		    beginPoint.addEventListener("dragend" , function(){
			     $("#startpoint_longitude").val(beginPoint.getPosition().lng);
			 	 $("#startpoint_latitude").val(beginPoint.getPosition().lat);
		    	  
			     var pt = beginPoint.getPosition();
			      
			     var gc = new BMap.Geocoder();
			     gc.getLocation(pt, function(rs){
				    var addComp = rs.addressComponents;
				    route();
				});  
		    })
		    //TODO
		    var gc = new BMap.Geocoder(); 
		    var pt = beginPoint.point; 

		   markerComplete(pt.lng,pt.lat);
		   
		     gc.getLocation(pt, function(rs){
			    var addComp = rs.addressComponents;
			    var  s=$("#startpoint").val();
			});  
		});
	
	     mkrTool.open(); //打开工具 
	     var icon= new BMap.Icon('/img/marker/start.png', new BMap.Size(38, 33), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		 mkrTool.setIcon(icon);
		 $("#beginChooser").attr("disabled" , true);
		 
	 }
	initMap();
	
	function search(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#startpoint").val());
	 }
</script>
</html>